<!-- 客户管理 -->
<template>
<div class="content-box">
  <FilterBox
    :labelWidth="120"
    :filterItemList="filterItemList"
    :filterData="filterData"
    @search="search"
    @clear="clear"
    @keep="keepHeaderList"
  >
  </FilterBox>
  <MyTable
    :tableColumn="tableColumn"
    :tableData="tableData"
    @setOrder="setOrder"
    @sendCurrentData="setCurrent"
    >
    <template v-slot:content="scope">
      <span class="btnCLass" v-if="scope.config.templateType=='SwitchEnable'">
        <el-switch
          @change="switchEnableChange(scope.row)"
          v-model="scope.row.status"
          active-color="#26BD00"
          inactive-color="#c0c4cc"
          :active-value='0'
          :inactive-value='1'
          >
        </el-switch>
      </span>
      <span class="btnCLass" v-else-if="scope.config.templateType=='SwitchExamine'">
        <el-switch
          @change="switchExamineChange(scope.row)"
          v-model="scope.row.lock_status"
          active-color="#26BD00"
          inactive-color="#c0c4cc"
          :active-value='0'
          :inactive-value='1'
          >
        </el-switch>
      </span>
      <span v-else-if="scope.config.templateType=='divText'">
        <div>{{scope.row[scope.config.prop]===0?$t('common.not_have'):scope.row[scope.config.prop]}}</div>
      </span>
      <span v-else>{{ scope.row[scope.config.prop] }}</span>
    </template>
  </MyTable>
  <!-- 分页组件 -->

  <Pagination
    :currentPage="pageinfo.page"
    :pageSize="pageinfo.limit"
    :total="pageinfo.number_all"
    :page_all="pageinfo.page_all"
    @pagination="SetPagination"
    @sendPushButton="pushButton"
  >
  </Pagination>
  
  <Add
    @success="getTableData"
    ref="add"
  ></Add>
  <Edit
    @success="getTableData"
    ref="edit"
  ></Edit>
  <ConfigureTags
    @success="getTableData"
    ref="configureTags"
  ></ConfigureTags>
  <CustomerType
    @success="getTableData"
    ref="customerType"
  ></CustomerType>
  <ResetPassword
    @success="getTableData"
    ref="resetPassword"
  ></ResetPassword>
  <SetDiscount
    @success="getTableData"
    ref="setDiscount"
  ></SetDiscount>
  <Related
    @success="getTableData"
    ref="related"
  ></Related>
</div>
</template>

<script>
import Add from "./CustomerManagement_add";
import Edit from "./CustomerManagement_edit";
import ConfigureTags from "./CustomerManagement_configureTags";
import CustomerType from "./CustomerManagement_customerType";
import ResetPassword from "./CustomerManagement_resetPassword";
import SetDiscount from "./CustomerManagement_setDiscount";
import Related from "./CustomerManagement_related";
export default {
  components: {
    Add,
    Edit,
    ConfigureTags,
    CustomerType,
    ResetPassword,
    SetDiscount,
    Related,
  },
  data(){
    return{
      filterItemList:[
        // input输入框
        { label:this.$t('CustomerManagementLang.Name'),width:200, filterKey: 'keyword', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('CustomerManagementLang.code'),width:200, filterKey: 'nickname', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('CustomerManagementLang.Telephone'),width:200, filterKey: 'tel', filterType: 'SearchInput', placeholderStr: null },
        // 下拉框
        { label:this.$t('CustomerManagementLang.area_code'),width:200, filterKey: 'area_code', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'code',value:'code'} },
        // 下拉框
        { label:this.$t('CustomerManagementLang.price_tag'),width:200, filterKey: 'tag_id', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name',value:'id'} },
        // 下拉框
        { label:this.$t('CustomerManagementLang.isExamine'),width:200, filterKey: 'lock_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name',value:'id'} },
      ],
      filterData:{
        page: "",
        limit: "30",
        order: "",
        
        keyword: "",
        nickname: "",
        tel: "",
        area_code: "",
        tag_id: "",
        lock_status: "",
      },
      options_arceCode: [],
      options_tag: [],
      options_switch:[],

      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.Name'),
          prop: "name",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.code'),
          prop: "nickname",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.Telephone'),
          prop: "mobile",
          width: 120,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.email'),
          prop: "email",
          width: 160,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.price_tag'),
          prop: "tag_names",
          width: 80,
          templateType:'divText'
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.sale'),
          prop: "belong_sale",
          width: 80,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.discount'),
          prop: "discount",
          width: 80,
          order:"",
        },
        {
          checked: true,
          label: this.$t('CustomerManagementLang.default_destination'),
          prop: "target_local_name",
          width: 80,
          order:"",
        },
        {   
          checked: true,
          label: this.$t('CustomerManagementLang.isEnable'),
          prop: "status",
          width: 120,
          templateType:'SwitchEnable',
        },
        {   
          checked: true,
          label: this.$t('CustomerManagementLang.isExamine'),
          prop: "status",
          width: 120,
          templateType:'SwitchExamine',
        },
      ],
      tableData: [],

      
      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataObj:{},
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getOptionsList()
    this.getHeaderList()
    this.getTableData()
    
  },
  methods:{
    // 获取下拉单列表
    async getOptionsList() {
      await this.$get("getPhoneAreaCode").then((res) => {
        this.options_arceCode = res.data;
      });
      await this.$get("getLocaType").then((res) => {
        this.options_switch = res.data;
      });
      await this.$get("memberTagList",{limit:-1}).then((res) => {
        this.options_tag = res.data;
        this.options_tag.unshift({id:0,name:this.$t('common.not_have')})
      });

      this.filterItemList=[
        // input输入框
        { label:this.$t('CustomerManagementLang.Name'),width:200, filterKey: 'keyword', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('CustomerManagementLang.code'),width:200, filterKey: 'nickname', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('CustomerManagementLang.Telephone'),width:200, filterKey: 'tel', filterType: 'SearchInput', placeholderStr: null },
        // 下拉框
        { label:this.$t('CustomerManagementLang.area_code'),width:200, filterKey: 'area_code', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.options_arceCode,label:'code',value:'code'} },
        // 下拉框
        { label:this.$t('CustomerManagementLang.price_tag'),width:200, filterKey: 'tag_id', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.options_tag,label:'name',value:'id'} },
        // 下拉框
        { label:this.$t('CustomerManagementLang.isExamine'),width:200, filterKey: 'lock_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.options_switch,label:'name',value:'id'} },
      ]
    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.filterData.keyword= "",
      this.filterData.nickname= "",
      this.filterData.tel= "",
      this.filterData.area_code= "",
      this.filterData.tag_id= "",
      this.filterData.lock_status= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId);
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 点击排序
    setOrder(data){
      this.filterData.order=data
      this.getTableData()
    },
    switchEnableChange(data){
      let params = new FormData();
      params.append("uid", data.uid);
      params.append("status", data.status);
      this.$postForm("memberEditStatus", params).then((res) => {
        if(res.success){
          this.$message.success(res.msg);
        }
        this.getTableData();
      });
    },
     switchExamineChange(data){
      let params = new FormData();
      params.append("uid", data.uid);
      params.append("status", data.lock_status);
      this.$postForm("memberEditLockStatus", params).then((res) => {
        if(res.success){
          this.$message.success(res.msg);
        }
        this.getTableData();
      });
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    pushButton(route) {
      if (route == "add") {
        this.$refs.add.init();
      }else if (route == "edit") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.edit.init(this.sendDataObj);
        }
      }else if (route == "priceTag") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.configureTags.init(this.sendDataObj);
        }
      }else if (route == "customerType") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.customerType.init(this.sendDataObj);
        }
      }else if (route == "resetPassword") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.resetPassword.init(this.sendDataObj);
        }
      }else if (route == "setDiscount") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.setDiscount.init(this.sendDataObj);
        }
      }else if (route == "related") {
        if (JSON.stringify(this.sendDataObj) == "{}" || this.sendDataObj == null) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          this.$refs.related.init(this.sendDataObj);
        }
      }else if(route=='del'){
          if (JSON.stringify(this.sendDataObj) == "{}") {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          let params = new FormData();
            params.append("uid", this.sendDataObj.uid);
          this.$postForm("delMember", params).then((res) => {
            if(res.success){
              this.$message.success(res.msg);
              this.getTableData();
            }
          });
        }
      }
    },
    // 获取表格数据
    getTableData(){
      this.$get("sonMembers", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataObj={}
        console.log(this.filterData)
      });
    },
    setCurrent(data){
      this.sendDataObj=data
    },
  }
}
</script>
<style scoped lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
</style>